<template>

  <div>
    <div>{{currentDevice.baseinfo?currentDevice.baseinfo.name:''}}</div>
    <a-divider />
    <a-spin v-if="loading" />
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="设备状态" key="1">
        <DeviceDetailBoxState :deviceObj="currentDevice"></DeviceDetailBoxState>
      </a-tab-pane>
      <a-tab-pane tab="基础信息" key="2" forceRender>
        <DeviceBasicInfo :deviceObj="currentDevice"></DeviceBasicInfo>
      </a-tab-pane>
      <a-tab-pane tab="预警记录" key="3" forceRender>

      </a-tab-pane>
      <a-tab-pane tab="预警配置" key="4" forceRender>

      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { getDeviceinfo } from '@/api/deviceApi'
import DeviceDetailBoxState from './DeviceDetailBoxState'
import DeviceBasicInfo from './DeviceBasicInfo'


export default {
  name: '',
  props: {

  },
  components: {
    DeviceDetailBoxState,
    DeviceBasicInfo
  },
  data() {
    return {
      loading: false,
      model: {},
      currentDevice: {
        baseinfo:{
          name: '请选择一个设备',
        },
        id: 0,
      },
    }
  },
  mounted(){

  },
  created() {
    // this.loadData()
  },
  methods: {
    view(device) {
      let that = this;
      that.loading = true;
      getDeviceinfo({ deviceId: device.id }).then(res => {
        let data = res.result;
        console.log("DeviceDetailBox data:" + data)
        if(data.length > 0)
          that.json = JSON.parse(data)[1];
        that.currentDevice = Object.assign({}, that.json);
      }).finally(() => {
        that.loading = false;
      })

    },
  },
  watch: {

  },
}
</script>

<style>
</style>